<template>
  <div>
    <div class="title">卫星图像</div>
    <div style="position:relative;">
      <div id="map" class="map" />
      <el-tag v-if="!hasPolygon" class="tag">{{ tag }}</el-tag>
      <el-button
        v-else
        class="btn"
        type="primary"
        @click.native="draw"
      >{{ btnMessage[drawFlag] }}</el-button>
    </div>
  </div>

</template>

<script>
import mapinit from '@/utils/map-init.js'
export default {
  name: 'MyMap',
  props: {
    coordinate: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      zoom: '15',
      tool: null,
      map: null,
      T: null,
      tag: '首次单击：开始编辑；再次单击：完成编辑',
      editFlag: false,
      btnMessage: {
        [false]: '尚未绘制，单击开始绘制',
        [true]: '取消绘制'
      },
      drawFlag: false,
      btnFlag: true
    }
  },
  computed: {
    hasPolygon() {
      return this.coordinate.length === 0 && this.btnFlag
    }
  },
  watch: {
    coordinate(newValue) {
      setTimeout(this.initMap(), 1000)
    }
  },
  methods: {
    initMap() {
      mapinit.init().then(T => {
        const map = new T.Map('map', {
          minZoom: 4
        })
        // map.disableDoubleClickZoom()
        map.setMapType(TMAP_HYBRID_MAP)// 设置卫星路网复合地图
        let lng, lat
        if (this.hasPolygon) {
          [lng, lat] = [116.40769, 39.89945]
        } else {
          [lng, lat] = this.coordinate[0][0]
          // 绘制地图
          for (const item of this.coordinate) {
            const points = []
            item.map(([lng, lat]) => {
              points.push(new T.LngLat(lng, lat))
            })
            const polygon = new T.Polygon(points, {
              color: '#009966',
              weight: 3,
              opacity: 1,
              fillColor: '#009966',
              fillOpacity: 0.5
            })
            this.polygonAddClickEventListener(polygon)
            map.addOverLay(polygon)
          }
        }
        map.centerAndZoom(new T.LngLat(lng, lat), this.zoom)
        this.T = T
        this.map = map

        const polygonTool = new T.PolygonTool(this.map, {
          color: '#009966',
          weight: 3,
          opacity: 1,
          fillColor: '#009966',
          fillOpacity: 0.5,
          showLabel: true
        })
        polygonTool.setTips('双击结束绘制')
        polygonTool.addEventListener('draw', (event) => {
          this.btnFlag = false
          this.$emit('add_coordinate', this.formatLngLats(event.currentLnglats))
          this.polygonAddClickEventListener(event.currentPolygon)
        })
        this.tool = polygonTool
      })
    },
    draw() {
      if (!this.drawFlag) {
        this.tool.open()
      } else {
        this.tool.clear()
        this.tool.close()
      }
      this.drawFlag = !this.drawFlag
    },
    edit(polygon) {
      this.$confirm('是否修改地图?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        polygon.enableEdit()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    add(polygon) {
    },
    modify(polygon) {
      this.$confirm('此操作将修改地图, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const lngLats_TDT = polygon.getLngLats()[0]
        const lngLats = this.formatLngLats(lngLats_TDT)
        this.$emit('update_coordinate', lngLats)
        polygon.disableEdit()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        })
      })
    },
    formatLngLats(lngLats_TDT) {
      const lngLats = lngLats_TDT.map(item => {
        return `${item.getLng()},${item.getLat()}`
      })
      return lngLats.join('@')
    },
    polygonAddClickEventListener(polygon) {
      polygon.addEventListener('click', (event) => {
        const polygon = event.target
        if (!this.editFlag) {
          this.edit(polygon)
        } else {
          this.modify(polygon)
        }
        this.editFlag = !this.editFlag
      })
    }
  }
}
</script>

<style scoped lang="scss">

.title {
  font-weight: bolder;
  margin: 15px 0;
}

.map-wrapper {
  position: relative;
}

.map {
  width: 100%;
  height: 550px;
  z-index: 1;
  // margin-top: 20px;
  border-radius: 4px;
  overflow: hidden;
  box-shadow: 0 0 5px 0 #333;
}

.btn {
  position: absolute;
  top: 30px;
  right: 10px;
  z-index: 2;
}

.tag {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}

.map >>> .tdt-control-copyright {
  display: none;
}

</style>
